<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Create Account | Any-Chat</title>
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</head>

<body style="background-color: #f1f1f1; padding-bottom: 0">

<!--<div th:insert="~{header :: nav}"></div>-->

<!-- Start Content -->
<div class="container" style="margin-top: 60px">

    <div class="row" style="margin-top: 60px">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                       <!-- <span class="glyphicon glyphicon-console"></span>-->
                        注册用户 </h3>
                </div>
                <div class="panel-body">
                    <form onsubmit="return false">
                        <div class="form-group" style="margin-top: 20px">
                            <div class="input-group col-md-6 col-md-offset-3">
                                <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                                <input type="text" class="form-control" name="username" id="username" placeholder="用户名">
                            </div>
                        </div>
                        <div class="form-group ">
                            <div class="input-group col-md-6 col-md-offset-3">
                                <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                                <input type="password" class="form-control" name="password" id="password" placeholder="密码">
                            </div>
                        </div>
                        <div class="form-group ">
                            <div class="input-group col-md-6 col-md-offset-3">
                                <div class="input-group-addon"><span class="glyphicon glyphicon-education"></span></div>
                                <input type="text" class="form-control" name="nickname" id="nickname" placeholder="昵称">
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <div class="input-group col-md-6 col-md-offset-3">
                                <button class="btn btn-success btn-block" id="Complete">完成</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group col-md-6 col-md-offset-3" style="text-align: center">
                                <a href="/login"><span class="glyphicon glyphicon-triangle-left"></span>返回登录页面</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- End Content -->

<script>
    /* 注册点击事件 */
    $("#Complete").click(function () {

        $.post("/api/common/register",
               {
                   "username": $("#username").val(),
                   "password": $("#password").val(),
                   "nickname": $("#nickname").val(),
                   "email": $("#email").val()
               },
                function (data) {
                   if (data){
                       alert("注册成功");
                       window.location.href="/login";
                   }
               }
        );

    });

</script>

</body>

</html>